import React from 'react';
import ReactDOM from 'react-dom';

/*一般会把样式重置的操作放置在 index.js 文件里面完成 */
import './assets/reset.css';

import './index.css';

import App from './App';

import Pagination from './components/Pagination/index.js';
import Users from  './components/User/index.js';
import Counter from './components/Counter/index.js';

/*
* react里面的组件化开发思想，在react里面也是支持组件化的。组件化的思想主要是为了实现公共区域的复用。
*
* react里面的组件有两种
* 1. 函数式组件
*   一个函数的返回值是一个 jsx 元素。该函数就是一个函数式组件
*   1.1 一个函数的 返回值是 jsx元素
*   1.2 函数式组件的名称，首字母大写
*   1.3 调用方式：
*       1.3.1 { Header() }
*       1.3.2  <Header></Header>
*       1.3.3  <Header/>
* 2. 类组件
* */

/*
* props 代表的是组件调用时候，传递给组件的属性信息
*
* 在进行组件开发的时候，有的时候，如果有些属性外界没有传递，则我们会给默认值，如果有传递有传递，则我们使用传递的
*
* 问题：大家构想一个常用的组件，哪些地方会使用到默认值这样的行为？
* 答: 分页组件（1. 总记录数（必传） 2. 每页显示的数量（可选） 3. 当前页码（可选））
*
* 组件管理：
* 一般我们不会把所有的代码全部放置在一个文件里面。一般会把组件分目录管理。
*
*
*
* */
function Header(props) {

    let initTitle = props.title ? props.title : '我是标题的默认值';

    console.log(props);

    /*使用 es6 结构方式获取属性信息*/
    let {title, info} = props;

    /*函数式组件内部的返回值是一个jsx元素，遵循我们之前的 jsx语法规范
    * 1. 根节点
    * 2. 必须闭合
    * */
    return (
        <>
            <h1> 我是头部的标题组件- {props.title} - {title} - {initTitle} </h1>
            <p>{props.info}--{info}</p>
        </>
    )
}


let title = '我是标题信息'
let info = '我是消息我是消息我是消息';
let total = 100;
let size = 10;
let page = 1;

//函数式组件的一个总结
/*
* 组件化开发
* 1. 定义组件，最好分目录管理
* 2. 编写组件函数，返回一个 jsx元素
* 3. export default 导出该组件
* 4. 在使用的地方 导入函数式组件
* 5. 使用
*
*
* */


/* 在 js 语法里面，如果要进行属性传递的时候，如果要传递的数据是通过变量获取的，直接使用插值表达式即可，不需要使用引号包裹。*/
ReactDOM.render(
    <React.StrictMode>
        <Header info={info}/>

        <Pagination total={total} size={10} page={page}></Pagination>

        <Users info="调用方传递数据信息">我是组件调用时候内部传递的数据信息</Users>

        <Counter></Counter>

    </React.StrictMode>,
    document.getElementById('root')
);
